<template>
    <div class="Index">
        <router-view/>
        <!--        <div style="height:50px;width: 100vw"></div>-->
        <div class="tab">
            <div class="index-list" @click="switchType(1)">
                <img class="tab-img" :src="type==1?require('../image/icon-home-select.png'):require('../image/icon-home.png')">
                <div :class="type==1?'tab-color':''" to="/" >首页</div>
            </div>
            <div v-if="user.type!=2" class="index-list" @click="switchType(2)">
                <img class="tab-img" :src="type==2?require('../image/icon-supplier-select.png'):require('../image/icon-supplier.png')">
                <div :class="type==2?'tab-color':''" to="/about" >供应商</div>
            </div>
            <div class="index-list" @click="switchType(3)">
                <img class="tab-img" :src="type==3?require('../image/icon-mine-select.png'):require('../image/icon-mine.png')" >
                <div :class="type==3?'tab-color':''" to="/" >我的</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Watch} from "vue-property-decorator";
    import Sence from "../sence/Sence";


    @Component({
        components: {}
    })

    export default class Index extends Sence {
        public type: any = 1;
        public user: any = ''; //用户信息
        @Watch("$route")
        private routeEvent(n: any, o: any): void {
            switch (n.path) {
                case "/":
                    this.type = 1;
                    break;
                case "/supplier":
                    this.type = 2;
                    break;
                case "/mine":
                    this.type = 3;
                    break;
            }
        }

        /**
         * 初始化
         */
        public mounted(): void {
            this.freshUser().then((res: any) => {
                this.user = res;
            })
            switch (this.$route.path) {
                case "/":
                    this.type = 1;
                    break;
                case "/supplier":
                    this.type = 2;
                    break;
                case "/mine":
                    this.type = 3;
                    break;
            }
        }

        /**
         * 切换底部菜单
         */
        public switchType(data: any): void {
            const that = this;
            if (data != that.type) {
                switch (data) {
                    case 1:
                        if (this.type != 1) {
                            that.type = 1;
                            this.$router.push("/");
                        }
                        break;

                    case 2:
                        if (this.type != 2) {

                            that.type = 2;
                            this.$router.push("/supplier");
                        }
                        break;
                    // case 3:
                    //     that.type = 3;
                    //     this.$router.push("/carused");
                    //     break;
                    case 3:
                        if (this.type != 3) {

                            that.type = 3;
                            this.$router.push("/mine");
                        }
                        break;
                }
            }
        }


    }


</script>

<style scoped lang="stylus">
    *
        padding 0
        margin 0

    .tab
        display flex
        flex-direction row
        position fixed
        bottom 0
        width 100vw
        justify-content space-around
        align-items center
        height 50px
        background #f2f2f2

        div
            margin-top 6px
            font-weight: bold
            color #515151
            font-size 12px

    .tab-color
        color: #4876ff!important

    .index-list
        display flex
        flex-direction column
        justify-content center
        align-items center

    .tab-img
        width 20px
        height 20px


</style>
